<template>
  <div class="box-full m-relative">
    <div class="m-absolute b-0 w-full t-0 box-border p-14">
      <a-scrollbar style="height: 100%; overflow-y: auto; overflow-x: hiddeh">
        <a-form ref="formRef" :model="form" size="medium" auto-label-width>
          <a-form-item label="自定义链接：" field="customUrl">
            <div class="w-full">
              <a-input v-model="form.customUrl" placeholder="请输入https://或http://开头的链接" />
            </div>
          </a-form-item>
          <div class="w-full h-20n"></div>
        </a-form>
      </a-scrollbar>
    </div>
    <div
      class="m-absolute w-full b-0 py-m pl-20 bgfff z-index-10"
      style="box-shadow: 0 -5px 8px -5px rgba(0, 0, 0, 0.1)"
    >
      <a-space>
        <a-button @click="resetForm">
          <template #icon>
            <icon-delete />
          </template>
          <template #default> 清除 </template>
        </a-button>
        <a-button @click="onChange" type="primary">
          <template #icon>
            <icon-check />
          </template>
          <template #default> 选择 </template>
        </a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { reAssign } from '@/utils/common'
import { Message } from '@arco-design/web-vue'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const formRef = ref()
const form = reactive({
  customUrl: undefined
})

// 重置表单
const resetForm = async () => {
  reAssign(form, false)
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 9 && !!newValue.link) {
      form.customUrl = newValue.link
    } else {
      resetForm()
    }
  },
  { deep: true, immediate: true }
)
// 点击选择
const onChange = async (id) => {
  if (!form.customUrl) return Message.error('请输入链接')
  if (!form.customUrl.includes('https://') && !form.customUrl.includes('http://'))
    return Message.error('请输入https://或http://开头的链接')
  emit('handleCheck', form.customUrl)
}
</script>
<style lang="scss" scoped>
.arco-scrollbar {
  height: 100%;
}
</style>
